<template>
  <div class="page_box">
    <ul class="uls_page">
        <li class="home" @click="home">首页</li>
        <li class="pre" @click="pret">上一页</li>
        <div class="pagebtn_box">
            <li
                class="page"
                v-for="(items, index) of pages"
                :key="index"
                ref="li"
                @click="pagebtn"
            >
                {{items}}
            </li>
        </div>
        <div class="box">
        <li class="next" @click="next">下一页</li>
        <li class="end" @click="end">尾页</li>
        <li class="pageCount">共{{pageCount}}页</li>
        </div>
    </ul>
  </div>
</template>

<script>
import { allUser } from 'com/shuju'
import { mapState } from 'vuex'
import { fenpage3, pages3 } from 'com/pages'
export default {
  name: 'UserPage',
  data () {
    return {
      currenPage: 0
    }
  },
  methods: {
    please (page) {
      var data = new FormData()
      data.set('page', page)
      data.set('size', 10)
      allUser(data, this)
    },
    pagebtn () {
      this.currenPage = parseInt(event.target.innerText) - 1
      pages3(this.currenPage, this.$refs.li,
        this.pageCount, 5)
      this.please(this.currenPage)
    },
    home () {
      this.currenPage = 0
      pages3(0, this.$refs.li,
        this.pageCount, 5)
      this.please(this.currenPage)
    },
    end () {
      this.currenPage = parseInt(this.pageCount) - 1
      pages3(parseInt(this.pageCount) - 1, this.$refs.li,
        this.pageCount, 5)
      this.please(this.currenPage)
    },
    next () {
      if (this.currenPage < this.pageCount - 1) {
        this.currenPage += 1
        pages3(this.currenPage, this.$refs.li,
          this.pageCount, 5)
        this.please(this.currenPage)
      } else {
        alert('已经是最后一页了')
      }
    },
    pret () {
      if (this.currenPage > 0) {
        this.currenPage -= 1
        pages3(this.currenPage, this.$refs.li,
          this.pageCount, 5)
        this.please(this.currenPage)
      } else {
        alert('已经是第一页了')
      }
    }
  },
  computed: {
    ...mapState({
      users: 'adminUser'
    }),
    pages () {
      var page = []
      for (var i = 0; i < Math.ceil(this.users.tatal / 10); i++) {
        page[i] = i + 1
      }
      return page
    },
    pageCount () {
      return this.pages.length
    }
  },
  mounted () {
    fenpage3(this.$refs.li, this.$refs.li.length)
  }
}
</script>

<style lang="stylus" scoped>
  .page_box{
    position: absolute
    height: 60px
    bottom: 0
    width: calc(100% - 254px)
    border: 1px solid red
    .uls_page{
      width: 100%
      height: auto
      position: relative
      list-style: none
      content:" ";
      display: table;
      clear:both;
      padding: 0
      margin: 0
      li{
        float: left
      }
      li + li{
        margin-left: .2rem
      }
      .pagebtn_box{
        position: absolute
        width: 1300px
        height: 40px
        left: 150px
        text-overflow: ellipsis
        overflow: hidden
        white-space: nowrap
        .page{
          background-color: rgb(255,255,255)
          position: absolute
          display: inline-block
          width: 40px
          height: 40px
          line-height: 40px
          text-align: center
          border: 1px solid rgb(190,190,190)
          transition: all .5s
          cursor: pointer
        }
        .page + .page {
          margin-left: .5rem
        }
        .page:nth-child(1){
          background-color: rgb(15,113,213)
          color: rgb(255,255,255)
        }
      }
      .box{
        position: absolute
        width: 200px
        height: 30px
        right: 0
      }
      .pageCount{
        margin-top: .23rem
      }
      .next,
      .pre,
      .home,
      .end
      {
        background-color: rgb(255,255,255)
        padding: .2rem
        border: 1px solid rgb(190,190,190)
        cursor: pointer
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .next:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .pre:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .page:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .end:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
      .home:hover{
        color: rgb(15,113,213)
        border: 1px solid rgb(15,113,213)
      }
    }
  }
</style>
